<template>
  <div class="createcourse">
    <div>
      <ul>
        <li><h2>新建课程</h2></li>
        <li>
          <span>课程名</span
          ><el-input
            v-model="course.courseName"
            placeholder="请输入课程名字"
          ></el-input>
        </li>
        <li>
          <span>教师名</span
          ><el-input
            v-model="course.teacherName"
            placeholder="请输入教师名"
          ></el-input>
        </li>
        <li>
          <span>说明</span>
          <el-input
            v-model="course.description"
            placeholder="请输入说明"
          ></el-input>
        </li>
        <li>
          <el-button plain round @click="next">下一步</el-button>
          <el-button type="primary" plain round @click="comeBack"
            >返回</el-button
          >
        </li>
      </ul>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      course: {
        courseName: "第一节课",
        teacherName: "老师",
        description: "没啥好说的",
      },
    };
  },
  methods: {
    next() {
      this.$router.push("/upload");
    },
    comeBack() {
      this.$router.push("/index");
    },
  },
};
</script>

<style scoped>
.createcourse {
  margin: 60px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background: url() no-repeat; 背景图*/
}
li {
  display: block;
  list-style: none;
  height: 100px;
  line-height: 100px;
  padding-left: 50px;
}
.createcourse div {
  width: 800px;
  height: 100%;
}
.createcourse div ul {
  background-color: white;
  border-radius: 40px;
}
.createcourse div li {
  margin: 0 100px;
}
.createcourse div li h2 {
  font-size: 30px;
}
.createcourse div li span {
  display: inline-block;
  width: 100px;
  font-size: 25px;
  color: #999;
}
.createcourse div li .el-input {
  width: 300px;
}
.createcourse div li:nth-last-child(1) {
  display: flex;
  align-items: center;
  margin: 0 200px;
}
.createcourse div li:nth-last-child(1) .el-button {
  width: 150px;
}
</style>